/*
 * @Author: Zhang Kai
 * @Date: 2021-10-28 14:40:52
 * @LastEditors: mayijun
 * @LastEditTime: 2022-08-04 17:08:20
 * @FilePath: /metricsx-standard-ui/src/components/TableSearchSelect/index.tsx
 */
import { useFormItem } from 'element-plus';
import {
  computed,
  defineComponent,
  PropType,
  ref,
  watchEffect
} from 'vue';
const TableSearchSelect = defineComponent({
  name: 'TableSearchSelect',
  props: {
    modelVal: {
      type: String as PropType<string>,
      default: ''
    },
    list: {
      type: Array,
      default: () => []
    },
    /* label拼接 */
    labelJoin: {
      type: Boolean as PropType<boolean>,
      default: false
    },
    /* 提示文案 */
    placeholder: {
      type: String as PropType<string>,
      default: '请选择'
    },
    /* 是否需要远程搜索 */
    isRemote: {
      type: Boolean as PropType<boolean>,
      default: false
    },
    /* 搭配isRemote使用 */
    remoteMethod: {
      type: Function,
      default: () => ''
    },
    /* 扩展 */
    selectConfig: {
      type: Object,
      default: () => { }
    },
    /* label对应的字段 */
    fieldLabel: {
      type: String,
      default: () => 'label'
    },
    /* value对应的字段 */
    fieldValue: {
      type: String,
      default: () => 'value'
    },
    /* value 为 item */
    valueItem: {
      type: Boolean,
      default: false
    },
    /* 多选模糊查询需要回显的数组 */
    mergeArr: {
      type: Array,
      default: () => []
    },
    /* 模糊搜索回显需要匹配的item */
    editItem: {
      type: Object,
      default: () => { }
    },
  },
  emits: ['optionChange', 'update:modelVal'],
  setup: (props, { slots, attrs, emit }) => {
    const selectList = ref();

    const modelVal = computed({
      get: () => props.modelVal,
      set: (v) => emit('update:modelVal', v)
    });

    /* 将外部list结构改为label value形式 */
    const formatArr = (arr: any) => {
      if (!arr.length) return [];
      return arr.reduce((pre: any, cur: any) => {
        pre.push({
          label: cur[props?.fieldLabel || 'label'],
          value: cur[props?.fieldValue || 'value']
        });
        return pre || [];
      }, []);
    };

    watchEffect(() => {
      const { list, mergeArr, selectConfig, editItem } = props;
      if (!list.length) {
        selectList.value = [];
        return;
      }

      /* 处理多选模糊查询回显问题 (tip: 这是一大坑) */
      if (mergeArr.length && selectConfig?.multiple) {
        list?.forEach((v: any) => {
          const item = mergeArr?.find((j: any) => j.id !== v.id);
          if (item) selectList.value = formatArr([...list, item]);
        });
        return;
      }
      /* 模糊搜索回显 需要传递回显的item */
      if (editItem?.id) {
        list?.forEach((v: any) => {
          if (v.id !== editItem?.id) {
            selectList.value = [
              ...formatArr(list),
              { label: editItem.cnName, value: editItem.id }
            ];
          }
        });
        return;
      }
      selectList.value = formatArr(list) || [];
    });
    return () => {
      const {
        labelJoin,
        remoteMethod,
        placeholder,
        isRemote,
        selectConfig,
        valueItem
      } = props;
      return (
        <el-select
          filterable
          remote={isRemote}
          remote-method={(name: string) => remoteMethod(name)}
          v-model={modelVal.value}
          placeholder={placeholder}
          clearable
          size="large"
          {...selectConfig}
        >
          {selectList.value?.map((v: any, i: number) => (
            <el-option
              key={i + v.value}
              onClick={() => emit('optionChange', v.value)}
              label={labelJoin ? `${v.label}(${v.value})` : v.label}
              value={valueItem ? v : v.value}
            ></el-option>
          ))}
        </el-select>
      );
    };
  }
});

export default TableSearchSelect;
